// 超出行数，自动显示行尾省略号，最多5行
// 来自uView的温馨提示：当您在控制台看到此报错，说明需要在App.vue的style标签加上【lang="scss"】
@for $i from 1 through 5 {
	.u-line-#{$i} {
		/* #ifdef APP-NVUE */
		// nvue下，可以直接使用lines属性，这是weex特有样式
		lines: $i;
		text-overflow: ellipsis;
		overflow: hidden;
		flex: 1;
		/* #endif */

		/* #ifndef APP-NVUE */
		// vue下，单行和多行显示省略号需要单独处理
		@if $i == '1' {
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
		} @else {
			display: -webkit-box!important;
			overflow: hidden;
			text-overflow: ellipsis;
			word-break: break-all;
			-webkit-line-clamp: $i;
			-webkit-box-orient: vertical!important;
		}
		/* #endif */
	}
}


.s_icon{
	&_arrow{
		position: relative;
		width: var(--size);
		height: var(--size);
		overflow: hidden;
		text{
			display: inline-flex;
			align-items: center;
			justify-content: center;
			position: relative;
			width: var(--size);
			height: var(--size);
			vertical-align: super;
			transform: rotate(var(--deg));
			transition-duration: .5s;
			&:before,&:after{
				position: absolute;
				content: '';
				width: 62.5%;height: 62.5%;
				border-color: var(--color);
				border-style: solid;
				border-width: 0 var(--width) var(--width) 0;
				transform: rotate(-45deg);
				box-sizing: border-box;
				left: 0;
			}
			&:after{
				left: 2%;
			}
			&.double{
				&:before{
					left: -16%;
				}
				&:after{
					left: 16%;
				}
			}
		}
	}
	&_check{
		display: inline-flex;
		align-items: center;
		justify-content: center;
		vertical-align: middle;
		position: relative;
		width: var(--size);
		height: var(--size);
		background: var(--color);
		box-sizing: border-box;
		border-radius: 100%;
		border: var(--border) solid var(--color);
		&:before,&:after{
			position: absolute;
			content: '';
			display: inline-block;
		}
		&:before{
			width: 22.5%;
			height: 45%;
			border-color: #fff;
			border-style: solid;
			border-width: 0 var(--width) var(--height) 0;
			transform: rotate(45deg) translateX(-15%) translateY(-10%);
		}
		
		&_has{
			&_txt{
				color: #fff;
				font-size: calc(var(--size) * 0.38);
				font-weight: 600;
				&:before,&:after{
					content: initial;
				}
			}
			&_none{
				border: var(--border) solid #999;
				color: #999;
				background: none;
			}
			&_border{
				border: var(--border) solid var(--color);
				color: var(--color);
				background: none;
				&:before{
					border-color: var(--color);
				}
			}
		}
	}
}


.s-progress{
	&_line{
		position: relative;
		overflow: hidden;
		width: 100%;
		height: var(--height);
		border-radius: var(--round);
		background-color: var(--bg);
		&::after{
			position: absolute;
			content: '';left: 0;top: 0;
			z-index: 1;
			width: var(--val);
			height: 100%;
			background: var(--color);
		}
		&_txta{
			color: #fff;
			font-size: 24rpx;
			text-align: center;
			line-height: var(--height);
			position: relative;
			z-index: 3;
		}
		&_txtb{
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			z-index: 4;
			overflow: hidden;
			background-color: var(--bg);
		}
		&_txtc{
			position: absolute;
			width: 100%;
			height: 100%;
			top: 0;
			left: var(--left);
			text-align: center;
			font-size: 24rpx;
			line-height: var(--height);
		}
	}
	&_circle{
		width: var(--size);
		height: var(--size);
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 20rpx;
		&_li{
			width: calc(var(--size) / 2);
			height: var(--size);
			position: absolute;
			top: 0;
			overflow: hidden;
			&.right {
			    right: 0;
				view{
					border-top: var(--border-width) solid var(--default-color);
					border-right: var(--border-width) solid var(--default-color);
					right: 0;
					&.act{
						animation: s_progress_circle_right var(--duration) linear;
						animation-fill-mode: forwards;
					}
				}
			}
			&.left {
			    left: 0;
				view{
					border-bottom: var(--border-width) solid var(--default-color);
					border-left: var(--border-width) solid var(--default-color);
					left: 0;
					&.act{
						animation: s_progress_circle_left var(--duration) linear;
						animation-fill-mode: forwards;
						animation-delay: var(--duration);
					}
				}
			}
			view {
			    width: var(--size);
			    height: var(--size);
			    border: var(--border-width) solid var(--active-color);
			    border-radius: 50%;
			    position: absolute;
			    top: 0;
				box-sizing: border-box;
			    transform: rotate(45deg);
			}
		}
		&_content{
		    width: var(--size);
		    height: var(--size);
			font-size: var(--fsize);
			color: var(--color);
			line-height: 1;
		    position: absolute;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}
}

@keyframes s_progress_circle_right{
    100% {
        transform: rotate(var(--progress-right));
    }
}
@keyframes s_progress_circle_left{
    100% {
        transform: rotate(var(--progress-left));
    }
}